<template>
  <div class="viewPort">
    <div class="container">
      <div class="screen">
        <template v-if="flag"> {{ res }}</template>
        <template v-else>{{ text }} </template>
      </div>
      <div class="panel">
        <Panel @resClick="resClick" @textClick="textClick" ref="panelRef" :btnInfo="btnInfo" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Panel from './components/panel.vue'
let res = ref('0')
const btnInfo = [
  { text: '(', color: '#dee1ec', type: 'action' },
  { text: ')', color: '#dee1ec' },
  { text: '%', color: '#dee1ec', type: 'action' },
  { text: 'AC', color: '#ffb735', type: 'action' },
  { text: '7', color: '#f9f9fa' },
  { text: '8', color: '#f9f9fa' },
  { text: '9', color: '#f9f9fa' },
  { text: '/', color: '#dee1ec' },
  { text: '4', color: '#f9f9fa' },
  { text: '5', color: '#f9f9fa' },
  { text: '6', color: '#f9f9fa' },
  { text: '*', color: '#dee1ec', type: 'action' },
  { text: '1', color: '#f9f9fa' },
  { text: '2', color: '#f9f9fa' },
  { text: '3', color: '#f9f9fa' },
  { text: '-', color: '#dee1ec' },
  { text: '0', color: '#f9f9fa' },
  { text: '.', color: '#f9f9fa' },
  { text: '=', color: '#4f6ef2' },
  { text: '+', color: '#dee1ec', type: 'action' }
]

const resClick = data => {
  text.value = ''
  if (data === 0) {
    res.value = 0
    return
  }

  res.value = data.toFixed(2)
  flag.value = true
}

let flag = ref(true)
// let flags = ref(true)
let text = ref(' ')
const textClick = data => {
  if (data.length === 0) {
    flag.value = true
    return
  }
  flag.value = false
  text.value = data.join('')

  if (data[data.length - 1] === '=') {
    flag.value = true
    return
    // flags.value = false
  }

  flag.value = false

  // if (flags.value) {
  // }
}
</script>

<style>
.viewPort {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: #eaecf3;
  height: 500px;
  width: 350px;
  border-radius: 20px;
  padding: 20px;
}

.screen {
  height: 100px;
  background-color: #fff;
  border-radius: 20px;
  text-align: right;
  line-height: 100px;
  padding-right: 20px;
}

.panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 30px;
  column-gap: 9px;
  padding-top: 30px;
}

.panel button {
  background-color: #dee1ec;
  border: none;
  width: 23%;
  height: 50px;
  cursor: pointer;
  border-radius: 10px;
}

* {
  margin: 0;
  padding: 0;
}
</style>
